<template>
    <div class="app-container">
        <el-form ref="fastForm" :model="fastForm" :inline="true" label-width="120px" class="searchForm">
            <el-form-item label="校区" prop="campusId">
                <el-select @change="changeFastCampus" size="mini" v-model="fastForm.campusId" placeholder="请选择校区"
                    filterable clearable>
                    <el-option v-for="(v, i) in campus_list" :key="i" :label="v.name" :value="v.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="园区" prop="parkId">
                <el-select @change="changeFastPark" size="mini" v-model="fastForm.parkId" placeholder="请先选择校区再选择园区"
                    filterable clearable>
                    <el-option v-for="(v, i) in fast_park_list" :key="i" :label="v.name" :value="v.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="楼栋" prop="buildingId">
                <el-select @change="changeFastBuilding" size="mini" v-model="fastForm.buildingId"
                    placeholder="请先选择园区再选择楼栋" filterable clearable>
                    <el-option v-for="(v, i) in fast_building_list" :key="i" :label="v.name" :value="v.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="层" prop="floorId">
                <el-select size="mini" v-model="fastForm.floorId" clearable>
                    <el-option v-for="(v, i) in fast_floor_list" :key="i" :label="v.floor" :value="v.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="房间号" prop="roomNo">
                <el-input size="mini" v-model="fastForm.roomNo" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleFast">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetFast">重置</el-button>
            </el-form-item>
        </el-form>
        <el-button size="mini" @click="manyOpen">开放给新生宿舍分配</el-button>
        <el-button size="mini" @click="openNotFull">将所有未住满学生宿舍开放给新生分配 </el-button>

        <el-table :data="fast_list" v-loading="fast_loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="#" align="center" prop="id" width="80" />
            <el-table-column label="校区" align="center" prop="campusName" width="120" />
            <el-table-column label="园区" align="center" prop="parkName" width="80" />
            <el-table-column label="楼栋" align="center" prop="buildingName" width="80" />
            <el-table-column label="层" align="center" prop="floor" width="80" />
            <el-table-column label="房间号" align="center" prop="roomNo" width="80" />
            <el-table-column label="住宿金额" align="center" prop="chargeStandard" width="120" />
            <el-table-column label="床位数" align="center" prop="bedNum" width="80" />
            <el-table-column label="已住人数" align="center" prop="occupancy" width="80" />
            <el-table-column label="是否开放给新生宿舍分配" align="center">
                <template slot-scope="scope">  
                    <!-- :disabled="scope.row.bedNum == scope.row.occupancy"   临时开放给新生 -->
                    <el-switch @change="changeDormIsNew(scope.row)"  v-model="scope.row.isNew" active-text="是"
                        inactive-text="否" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                        inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="fast_total > 0" :total="fast_total" :page.sync="fastForm.pageNum"
            :limit.sync="fastForm.pageSize" @pagination="listFast" />
    </div>
</template>
<script>
import { listAllCampus, listFloorByBuilding, listParkByCampus, listBuildingByPark, listDormInfo, changeDormIsNew, openNotFull, manyOpen } from "@/api/dormitory/basedata/dormitory";
import { fullLoading, groupBy, getChineseKey, getImg, isEmpty } from "@/api/helpFunc";

export default {
    name: "openDorm",
    data() {
        return {
            fast_list: [],
            fast_total: 0,
            fast_loading: false,
            fastForm: {
                pageNum: 1,
                pageSize: 10
            },
            ids: [],
            fast_park_list: [],
            fast_building_list: [],
            fast_floor_list: [],
            campus_list: [],
        }
    },
    created() {
        this.listAllCampus();
        this.listFast();
    },
    methods: {
        async openNotFull() {
            let loading = fullLoading(this);
            let res = await openNotFull();
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.listFast();
            }
        },
        async changeDormIsNew(dorm) {
            let loading = fullLoading(this);
            let res = await changeDormIsNew(dorm);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
            } else {
                this.handleFast();
            }
        },
        async listFast() {
            this.fast_loading = true;
            let res = await listDormInfo(this.fastForm);
            this.fast_loading = false;
            if (res.code == 200) {
                this.fast_list = [...res.rows];
                this.fast_total = res.total;
            }
        },
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
        },
        async manyOpen() {
            let ids = [...this.ids];
            if (isEmpty(ids)) {
                this.$message.info("请选择宿舍");
                return;
            }
            let loading = fullLoading(this);
            let res = await manyOpen(ids);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.listFast();
            }
        },
        handleFast() {
            this.fastForm.pageNum = 1;
            this.listFast();
        },
        resetFast() {
            this.resetForm("fastForm");
            this.handleFast();
        },

        
        async listAllCampus() {
            let res = await listAllCampus();
            if (res.code == 200) {
                this.campus_list = [...res.data];
            }
        },
        async changeFastBuilding(val) {
            this.fastForm.floorId = null;
            this.fast_floor_list = [];
            if (!isEmpty(val)) {
                let res = await listFloorByBuilding(this.fastForm.buildingId);
                if (res.code == 200) {
                    this.fast_floor_list = [...res.data];
                }
            }
        },
        async changeFastPark(val) {
            this.fastForm.buildingId = null;
            this.fastForm.floorId = null;

            this.fast_building_list = [];
            this.fast_floor_list = [];
            if (!isEmpty(val)) {
                let res = await listBuildingByPark(this.fastForm.parkId);
                if (res.code == 200) {
                    this.fast_building_list = [...res.data];
                }
            }
        },

        async changeFastCampus(val) {
            this.fastForm.parkId = null;
            this.fastForm.buildingId = null;
            this.fastForm.floor = null;

            this.fast_park_list = [];
            this.fast_building_list = [];
            this.fast_floor_list = [];
            if (!isEmpty(val)) {
                let res = await listParkByCampus(this.fastForm.campusId);
                if (res.code == 200) {
                    this.fast_park_list = [...res.data];
                }
            }
        },
    }
}

</script>